import React,{useEffect,useState} from 'react'
import {Route,Redirect,Link,Switch} from 'react-router-dom';
import logo from '../../images/logo.png'
import Header from '../Header/index'
import System from '../System';
import Fun from '../Fun';
import Toys from '../Toys';
import axios from 'axios'; 
import './home.css'
import ReactEcharts from 'echarts-for-react';


const New = () => {
  
    const [adminNum,setAdminNum]=useState(0);
    const [musicNum,setMusicNum]=useState(0);
    const [videoNum,setVideoNum]=useState(0);
    const [jokeNum,setJokeNum]=useState(0);

    useEffect(()=>{
        const token=localStorage.getItem('token');
        if(token){
            axios.get('https://wx.xxmtcds.top:2333/admin/getlendata',{
                headers: {'authorization':`${token}`}
            })
            .then(res=>{
                setAdminNum(res.data.adminlen);
                setMusicNum(res.data.musicLen);
                setVideoNum(res.data.videoLen);
                setJokeNum(res.data.jokeLen);
            
            })
            .catch(error=>{
                console.log(error);
            })
        }
    })

    const getOption=()=>{

        return{
            title : {
                text: '后台管理系统数据统计',
                subtext: '版权所有——优雅家族',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)" 
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['管理员数量','音乐数量','视频数量','笑话数量']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:adminNum, name:'管理员数量'},
                        {value:musicNum, name:'音乐数量'},
                        {value:videoNum, name:'视频数量'},
                        {value:jokeNum, name:'笑话数量'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
        
    }



    return(
        <div className="newContainer">
            <div className="title">
                <h1>hello,欢迎登录优雅家族后台管理系统！</h1>
            </div>
            <div className='sheetContainer' >
                <ReactEcharts option={getOption()} style={{width:'650px',height:'360px'}}/> 
                <div className="qunContainer">
                    <div className="Quantity">
                        <h2>昨日访问量</h2>
                        <h1>1000</h1>
                    </div>
                    <div className="Quantity">
                        <h2>新增用户</h2>
                        <h1>100</h1>
                    </div>
                </div>
             </div>  
            
        </div>
    )
}

const Home = () => {
   const [adminUser,setAdminUser]=useState('ztr');
   const [userPic,setUserPic]=useState('');

    useEffect(()=>{
        const token=localStorage.getItem('token');
        if(token){
            axios.get('https://wx.xxmtcds.top:2333/admin/getmyself',{
                headers: {'authorization':`${token}`}
            })
            .then(res=>{
                setUserPic(res.data[0].manage_avatar);
                setAdminUser(res.data[0].manage_account);
                // console.log(adminUser);
            })
            .catch(error=>{
                console.log(error);
            })  
        }      
    })
   
    
  const backLogin = () => {
        localStorage.setItem('isLogin','false');
        return <Route render={()=>{
            return <Redirect to='/' />
        }}/>         
    }  

    return (
        <div>
            <div className="outerContainer">
            <div className="titleLogo">
                <img className="logo" src={logo}/>
                <div className="reback">
                    当前管理员：
                    <img className="adminimg" src={userPic}/> {adminUser}
                   
                <Link to='/'className="rebackLogin" onClick={backLogin}>点击退出</Link></div>
                
            </div>   
                <div className="Container">
                   
                    <div className="leftContainer"> 
                        <Header />
                    </div>
                    <div className="rightContainer">

                        <div className="rightContent">
                        <Switch>
                            <Route exact path='/home' component={New} />
                            <Route path='/home/system' component={System}/>
                            <Route path='/home/fun' component={Fun} />
                            <Route path='/home/talk' component={Toys} />
                        </Switch>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Home
